HTML Input Types

HTML உள்ளீட்டு வகைகளைக் கற்றுக்கொள்ளுங்கள்

HTML உள்ளீட்டு வகைகள்

இந்த அத்தியாயம் HTML <input> உறுப்புக்கான வெவ்வேறு வகைகளை விவரிக்கிறது.

💡 உதவிக்குறிப்பு:

type பண்புக்கூறின் இயல்புநிலை மதிப்பு "text" ஆகும்.

HTML இல் பயன்படுத்தக்கூடிய வெவ்வேறு உள்ளீட்டு வகைகள்:

type="text"
type="password"
type="checkbox"
type="radio"
type="date"
type="email"
type="number"
type="search"

உள்ளீட்டு வகை: Text

<input type="text"> ஒரு ஒற்றை வரி உரை உள்ளீட்டுப் புலத்தை வரையறுக்கிறது:

எடுத்துக்காட்டு

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>



உள்ளீட்டு வகை: Password

<input type="password"> ஒரு கடவுச்சொல் புலத்தை வரையறுக்கிறது:

எடுத்துக்காட்டு

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>



கடவுச்சொல் புலத்தில் உள்ள எழுத்துக்கள் மறைக்கப்பட்டு (நட்சத்திரங்கள் அல்லது வட்டங்களாகக் காட்டப்படும்).

உள்ளீட்டு வகை: Submit

<input type="submit"> படிவத் தரவை படிவ-கையாளுநருக்குச் சமர்ப்பிப்பதற்கான ஒரு பொத்தானை வரையறுக்கிறது.

படிவ-கையாளுநர் பொதுவாக உள்ளீட்டுத் தரவைச் செயலாக்குவதற்கான ஸ்கிரிப்ட் கொண்ட ஒரு சர்வர் பக்கமாகும்.

படிவ-கையாளுநர் படிவத்தின் action பண்புக்கூறில் குறிப்பிடப்பட்டுள்ளது:

எடுத்துக்காட்டு

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>





நீங்கள் submit பொத்தானின் value பண்புக்கூறைத் தவிர்த்தால், பொத்தானுக்கு இயல்புநிலை உரை கிடைக்கும்:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

உள்ளீட்டு வகை: Reset

<input type="reset"> அனைத்து படிவ மதிப்புகளையும் அவற்றின் இயல்புநிலை மதிப்புகளுக்கு மீட்டமைக்கும் ஒரு மீட்டமைப்பு பொத்தானை வரையறுக்கிறது:

எடுத்துக்காட்டு

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

⚠️ குறிப்பு:

நீங்கள் உள்ளீட்டு மதிப்புகளை மாற்றிவிட்டு "Reset" பொத்தானைக் கிளிக் செய்தால், படிவ-தரவு இயல்புநிலை மதிப்புகளுக்கு மீட்டமைக்கப்படும்.

உள்ளீட்டு வகை: Radio

<input type="radio"> ஒரு ரேடியோ பொத்தானை வரையறுக்கிறது.

ரேடியோ பொத்தான்கள் ஒரு பயனரை வரையறுக்கப்பட்ட எண்ணிக்கையிலான தேர்வுகளில் ஒன்றை மட்டுமே தேர்ந்தெடுக்க அனுமதிக்கின்றன:

எடுத்துக்காட்டு

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Choose your favorite Web language:



உள்ளீட்டு வகை: Checkbox

<input type="checkbox"> ஒரு சரிபார்ப்புப் பெட்டியை வரையறுக்கிறது.

சரிபார்ப்புப் பெட்டிகள் ஒரு பயனரை வரையறுக்கப்பட்ட எண்ணிக்கையிலான தேர்வுகளில் பூஜ்ஜியம் அல்லது அதற்கு மேற்பட்ட விருப்பங்களைத் தேர்ந்தெடுக்க அனுமதிக்கின்றன.

எடுத்துக்காட்டு

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>


உள்ளீட்டு வகை: Button

<input type="button"> ஒரு பொத்தானை வரையறுக்கிறது:

எடுத்துக்காட்டு

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

பிற உள்ளீட்டு வகைகள்

type="color"

நிறத்தைத் தேர்ந்தெடுக்க பயன்படுகிறது

<input type="color" id="favcolor" name="favcolor">

type="date"

தேதியைத் தேர்ந்தெடுக்க பயன்படுகிறது

<input type="date" id="birthday" name="birthday">

type="email"

மின்னஞ்சல் முகவரிக்கு பயன்படுகிறது

<input type="email" id="email" name="email">

type="file"

கோப்புப் பதிவேற்றத்திற்கு பயன்படுகிறது

<input type="file" id="myfile" name="myfile">

type="number"

எண் மதிப்புகளுக்கு பயன்படுகிறது

<input type="number" id="quantity" name="quantity" min="1" max="5">

type="range"

ஸ்லைடர் கட்டுப்பாட்டிற்கு பயன்படுகிறது

<input type="range" id="vol" name="vol" min="0" max="50">

type="search"

தேடல் புலங்களுக்கு பயன்படுகிறது

<input type="search" id="gsearch" name="gsearch">

type="tel"

தொலைபேசி எண்களுக்கு பயன்படுகிறது

<input type="tel" id="phone" name="phone">

உள்ளீட்டு கட்டுப்பாடுகள்

சில பொதுவான உள்ளீட்டு கட்டுப்பாடுகளின் பட்டியல் இங்கே:

பண்புக்கூறு விளக்கம்
checked பக்கம் ஏற்றப்படும் போது ஒரு உள்ளீட்டுப் புலம் முன்-தேர்ந்தெடுக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது (type="checkbox" அல்லது type="radio" க்கு)
disabled ஒரு உள்ளீட்டுப் புலம் முடக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது
max ஒரு உள்ளீட்டுப் புலத்திற்கான அதிகபட்ச மதிப்பைக் குறிப்பிடுகிறது
maxlength ஒரு உள்ளீட்டுப் புலத்திற்கான அதிகபட்ச எழுத்துகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது
min ஒரு உள்ளீட்டுப் புலத்திற்கான குறைந்தபட்ச மதிப்பைக் குறிப்பிடுகிறது
pattern உள்ளீட்டு மதிப்பைச் சரிபார்க்க ஒரு வழக்கமான வெளிப்பாட்டைக் குறிப்பிடுகிறது
readonly ஒரு உள்ளீட்டுப் புலம் படிக்க மட்டுமே (மாற்ற முடியாது) என்பதைக் குறிப்பிடுகிறது
required ஒரு உள்ளீட்டுப் புலம் தேவைப்படுகிறது (நிரப்பப்பட வேண்டும்) என்பதைக் குறிப்பிடுகிறது
size ஒரு உள்ளீட்டுப் புலத்தின் அகலத்தை (எழுத்துகளில்) குறிப்பிடுகிறது
step ஒரு உள்ளீட்டுப் புலத்திற்கான சட்டப்பூர்வ எண் இடைவெளிகளைக் குறிப்பிடுகிறது
value ஒரு உள்ளீட்டுப் புலத்திற்கான இயல்புநிலை மதிப்பைக் குறிப்பிடுகிறது

📚 கூடுதல் கற்றல்:

நீங்கள் அடுத்த அத்தியாயத்தில் உள்ளீட்டு கட்டுப்பாடுகளைப் பற்றி மேலும் அறிவீர்கள்.

எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டு 0 முதல் 100 வரையிலான மதிப்பை உள்ளிடலாம், 10 இன் படிகளில். இயல்புநிலை மதிப்பு 30:

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

பயிற்சி

INPUT உறுப்பின் type பண்புக்கூறின் இயல்புநிலை மதிப்பு என்ன?

button
✗ தவறு! button என்பது type பண்புக்கூறின் இயல்புநிலை மதிப்பு அல்ல
submit
✗ தவறு! submit பொத்தான்கள் படிவங்களைச் சமர்ப்பிக்க பயன்படுகின்றன, ஆனால் இது இயல்புநிலை அல்ல
text
✓ சரி! type பண்புக்கூறின் இயல்புநிலை மதிப்பு "text" ஆகும்

HTML உள்ளீட்டு வகை பண்புக்கூறு

குறிச்சொல் விளக்கம்
<input type=""> காண்பிக்க வேண்டிய உள்ளீட்டு வகையைக் குறிப்பிடுகிறது

🎯 முக்கிய புள்ளிகள்:

  • type பண்புக்கூறு உள்ளீட்டு கட்டுப்பாட்டின் வகையை தீர்மானிக்கிறது
  • இயல்புநிலை மதிப்பு "text" ஆகும்
  • வெவ்வேறு type மதிப்புகள் வெவ்வேறு உள்ளீட்டு கட்டுப்பாடுகளை உருவாக்குகின்றன
  • ஒவ்வொரு type மதிப்பும் குறிப்பிட்ட பயன்பாட்டு வழக்குகளுக்கு ஏற்றது